<script setup>
import brandAPI from '../api/brand_api.js' // 假设品牌接口文件
import { ref, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import lodash from 'lodash'

// 表格数据相关
const tableData = ref([])
const total = ref(0)
const searchObj = ref({
  current: 1,
  limit: 10,
  name: '', // 搜索品牌名
  country: '' // 搜索品牌国家
})

// 弹窗相关
const editWinVisible = ref(false)
const addWinVisible = ref(false)
const obj = ref({}) // 新增/编辑的品牌对象

// 查询方法
const search = async () => {
  const result = await brandAPI.page(searchObj.value)
  tableData.value = result.data
  total.value = result.count
}

onMounted(async () => {
  await search()
})

// 分页相关方法
const handleSizeChange = () => {
  search()
}
const handleCurrentChange = () => {
  search()
}

// 搜索方法
const handlerSearch = async () => {
  searchObj.value.current = 1
  await search()
}

// 编辑弹窗相关方法
const editCancel = () => {
  obj.value = {}
  editWinVisible.value = false
}
const editCommit = async () => {
  await brandAPI.edit(obj.value)
  await search()
  editWinVisible.value = false
  ElMessage.success('编辑成功')
}

// 新增弹窗相关方法
const addCancel = () => {
  obj.value = {}
  addWinVisible.value = false
}
const addCommit = async () => {
  await brandAPI.add(obj.value)
  await search()
  addWinVisible.value = false
  obj.value = {}
  ElMessage.success('新增成功')
}

// 编辑 - 打开弹窗并回显数据
const handleEdit = async (index, row) => {
  obj.value = lodash.clone(row)
  editWinVisible.value = true
}

// 删除方法
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确认删除该行数据吗？',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(async () => {
        await brandAPI.del(row.id)
        searchObj.value.current = 1
        await search()
        ElMessage.success('删除成功')
      })
      .catch(() => {
        // 取消删除逻辑，可按需添加
      })
}
</script>

<template>
  <!-- 搜索表单 -->
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top:10px ">
    <el-form-item label="品牌名">
      <el-input v-model="searchObj.name" placeholder="请输入品牌名" clearable />
    </el-form-item>
    <el-form-item label="品牌国家">
      <el-input v-model="searchObj.country" placeholder="请输入品牌国家" clearable />
    </el-form-item>
  </el-form>
  <el-form :inline="true">
    <el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addWinVisible = true">新增</el-button>
    </el-form-item>
  </el-form>

  <!-- 品牌表格 -->
  <el-table :data="tableData" style="width: 100%" border>
    <el-table-column label="ID" prop="id" width="80" />
    <el-table-column label="品牌名" prop="name" width="180" />
    <el-table-column label="品牌国家" prop="country" width="200" />
    <el-table-column label="操作" width="160">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[10, 20, 30, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px"
  />

  <!-- 编辑弹窗 -->
  <el-dialog v-model="editWinVisible" title="编辑品牌" width="500">
    <el-form :model="obj" label-width="100px">
      <el-form-item label="品牌ID">
        <el-input v-model="obj.id" disabled placeholder="编辑时ID通常不可改" />
      </el-form-item>
      <el-form-item label="品牌名">
        <el-input v-model="obj.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="品牌国家">
        <el-input v-model="obj.country" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 新增弹窗 -->
  <el-dialog v-model="addWinVisible" title="新增品牌" width="500">
    <el-form :model="obj" label-width="100px">
      <el-form-item label="品牌名">
        <el-input v-model="obj.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="品牌国家">
        <el-input v-model="obj.country" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addCancel">取消</el-button>
        <el-button type="primary" @click="addCommit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 可按需添加样式调整表格、弹窗等外观 */
.el-table {
  margin-top: 10px;
}
</style>